<template>
  <div class="app-container" style="padding: 0px 20px 20px 20px;">
    <template v-for="list in recordsList">
      <el-descriptions :column="3" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);margin-bottom: 8px;"
                       v-if="recordsList.length != 0" size="small">
        <el-descriptions-item label="时间：" style="margin-left:5px;">{{ list.followTime }}</el-descriptions-item>
        <el-descriptions-item label="跟进人：">{{ list.followPerson }}</el-descriptions-item>
        <el-descriptions-item label="方式：">{{ formatterType(list.type) }}</el-descriptions-item>
        <el-descriptions-item label="最新进展：" style="margin-left:5px;">{{ list.latestDevelopments
          }}</el-descriptions-item>
        <el-descriptions-item label="附件:">
          <file-view :type="showInfo" :businessId="list.recordsId"
                     :businessCode="businessRecords" @change="getFile"></file-view>
        </el-descriptions-item>
        <el-descriptions-item label="批注人：">{{ list.annotationsName }}</el-descriptions-item>
        <el-descriptions-item label="批注：" style="margin-left:5px;">{{ list.annotations }}</el-descriptions-item>
        <el-descriptions-item label="批注附件：" style="margin-left:5px;">
          <file-view :type="showInfo" :businessId="list.recordsId"
                     :businessCode="businessAnnotations" @change="getFile"></file-view>
        </el-descriptions-item>
      </el-descriptions>
    </template>
    <div class="el-table__empty-block" style="width: 1253px; height: 100%;" v-if="recordsList.length == 0">
      <span class="el-table__empty-text" style=" margin-right:350px;">暂无数据</span>
    </div>
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

  </div>
</template>

<script>
import { listRecords, listRecordsPerson, delRecords, addRecords, updateRecords } from "@/api/enterprise/records";
import FileView from "@/components/FileView/index"

import BusinessRecords from '../../records/records.vue'

export default {
  dicts: ['business_classify', 'customer_industry', 'business_state', 'tracking_stage', 'enterprise_records', 'business_source'],
  name: "personRecords",
  components: { FileView },
  props: {
    bId: {
      type: String,
      default: ""
    },
    enterpriseId: {
      type: String,
      default: ""
    },
    enterpriseName: {
      type: String,
      default: ""
    },
    contacts: {
      type: String,
      default: ""
    },
    telephone: {
      type: String,
      default: ""
    },
  },
  data() {
    return {
      userName: "",
      fileType: 0,
      fileType2: 0,
      showInfo: 2,
      disabled: false,
      isShowEdit: true,
      isShow:false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 【请填写功能名称】表格数据
      recordsList: [],
      // 弹出层标题
      title: "",
      dialogVisible: false,
      dialogImageUrl: '',
      businessRecords: "enterprise_records",
      businessAnnotations: "enterprise_annotatio",
      // 是否显示弹出层
      open: false,
      cordId:null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 15,
        enterprisePersonId: "",
      },
      // 表单参数
      form: {
      },
      // 表单校验
      rules: {
        type: [
          { required: true, message: "跟进方式不能为空", trigger: "change" },
        ],
        latestDevelopments: [
          { required: true, message: "最新进展不能为空", trigger: "blur" },
        ],
        annotations: [
          { required: true, message: "批注不能为空", trigger: "blur" },
        ],
      }
    };
  },
  created() {
    this.userName = this.$store.state.user.name;
    this.getList();
  },
  methods: {
    /** 查询【请填写功能名称】列表 */
    getList() {
      this.queryParams.enterprisePersonId = this.enterpriseId;
      listRecordsPerson(this.queryParams).then(response => {
        this.recordsList = response.rows;
      });
    },
    closeEle(data) {
      this.type = 0;
      this.show = 1;
      console.log("执行了吗:" + data)
      this.open = data;
      this.getList();

    },
    //转商机
    convertBusiness() {
      this.uuid = this.guid();
      this.openBusinessinfoClass=true
      const enterpriseId = this.enterpriseId
      this.$router.push("/enterpriseInfo/sale/businessinfo/" + enterpriseId);
      //this.$emit('change', '1');

    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    handlePictureCardPreview(url) {
      this.dialogImageUrl = url;
      this.dialogVisible = true;
    },
    getFile(data) {
      console.log(JSON.stringify(data))
    },
    // 表单重置
    reset() {
      this.form = {
        recordsId: null,
        enterpriseId: null,
        followTime: null,
        followId: null,
        followPerson: null,
        type: null,
        latestDevelopments: null,
        annotationsId: null,
        annotationsName: null,
        annotations: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.recordsId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    formatterType(value) {
      var type = "";
      this.dict.type.enterprise_records.forEach(item => {
        if (item.value == value)
          type = item.label;
      });
      return type;
    },
    showDate() {
      var mydate = new Date();
      var str = "" + mydate.getFullYear() + "-";
      str += (mydate.getMonth() + 1) <= 9 ? "0" + (mydate.getMonth() + 1) + "-" : mydate.getMonth() + 1 + "-";
      str += mydate.getDate() <= 9 ? "0" + mydate.getDate() : mydate.getDate();
      return str;
    },
    formatterDate(date) {
      var mydate = new Date(date);
      var str = "" + mydate.getFullYear() + "-";
      str += (mydate.getMonth() + 1) <= 9 ? "0" + (mydate.getMonth() + 1) + "-" : mydate.getMonth() + 1 + "-";
      str += mydate.getDate() <= 9 ? "0" + mydate.getDate() : mydate.getDate();
      return str;
    },
    guid() {
      function S4() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
      }
      return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
    },
  }
};
</script>
<style scoped>
.el-descriptions-item__label {
  margin-left: 5px;
  margin-top:4px
}
.el-descriptions-item__content span{
  margin-top:4px
}
.el-descriptions__header {
  padding: 0px;
}

.el-descriptions-item__label.has-colon::after {
  content: "";
}
</style>
